<template>
 <!-- hbx 2022-8-18 09:36:00 游记信息后端管理 -->
	<div id="TravelsList">
		<div>
			<el-row>
				<el-card class="box-card">
					<el-row>
						<el-col :span="4" style="float: left">
							<el-input placeholder="请输入作者" v-model="author" clearable></el-input>
						</el-col>
						<el-col :span="4" style="float: left;margin-left:20px">
							<el-input placeholder="请输入游记标题" v-model="title" clearable></el-input>
						</el-col>
						<el-col :span="4" style="float: left;margin-left:20px">
							<el-select v-model="releaseType" placeholder="请选择状态">
								<el-option
									v-for="item in typeList"
									:key="item.id"
									:label="item.releaseType"
									:value="item.id">
								</el-option>
							</el-select>
						</el-col>
                        <el-col :span="4" style="margin-left:20px">
                            <el-date-picker
                                v-model="time"
                                align="right"
                                type="date"
                                placeholder="选择发布游记日期"
                                :picker-options="pickerOptions">
                            </el-date-picker>
                        </el-col>
                        <el-col :span="2" style="float: left;margin-left:20px">
							<el-button icon="el-icon-search" @click="getTravelsVague" circle></el-button>
						</el-col>
						<el-col :span="2">
							<el-button @click="travelsRefresh()" round>刷新</el-button>
						</el-col>
					</el-row>
					<el-row>
						<el-card class="box-card">
						<!-- 游记列表内容展示 -->
							<el-col :span="24">
								<el-table :data="travelsFrom" border style="width: 100%">
									<el-table-column fixed prop="author" label="作者" width="220">
									</el-table-column>
                                    <el-table-column fixed prop="title" label="游记标题" width="220">
									</el-table-column>
                                    <el-table-column prop="textContent" label="游记内容" width="220">
                                        <template slot-scope="scope">
                                            <div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                            {{scope.row.textContent}}
                                            </div>
                                        </template>
                                    </el-table-column>
									<el-table-column width="100" label="游记状态" align="center">
                                        <template slot-scope="scope">
                                            <el-tag type="success" effect="dark" v-if="scope.row.releaseTypeId==1">审批中</el-tag>
                                            <el-tag type="danger" effect="dark" v-if="scope.row.releaseTypeId==2">审批失败</el-tag>
                                            <el-tag  effect="dark" v-if="scope.row.releaseTypeId==3">审批成功</el-tag>
                                        </template>
                                    </el-table-column>
									<!-- <el-table-column prop="textContent" label="游记内容" width="220">
									</el-table-column> -->
									<el-table-column prop="views" label="游记浏览量" width="220">
									</el-table-column>
									<el-table-column
									prop="avatarId"
									label="封面图片"
									width="220">
										<template slot-scope="scope">
											<img :src='`http://127.0.0.1:8082/getImageById?id=${scope.row.coverId}`'  style="width:70px;height:70px;">
										</template>
									</el-table-column>
									<el-table-column prop="createTime" label="游记发布时间" width="220">
									</el-table-column>
									<el-table-column fixed="right" label="操作" width="220">
										<template slot-scope="scope">
											<el-button @click="travelsDetail(scope.row)" type="text" size="small"><i class="el-icon-view"></i>查看</el-button>
											<el-button @click="travelsApproval(scope.row)" type="text" size="small"><i class="el-icon-view"></i>审批</el-button>
											<el-button type="text" @click="deleteTravels(scope.row.id)" size="small"><i class="el-icon-delete"></i>删除</el-button>
										</template>
									</el-table-column>
								</el-table>
							</el-col>
						</el-card>
					</el-row>
						<!-- 审批游记弹窗 -->
					<el-dialog  title="审批游记" :visible.sync="dialogFormVisibleEdit">
						<el-form :model="approvalFrom" label-width="100px">
							<el-form-item label="审批状态" :label-width="formLabelWidth" >
								<el-select v-model="approvalFrom.releaseTypeId" placeholder="请选择状态">
									<el-option
									v-for="item in typeList"
									:key="item.id"
									:label="item.releaseType"
									:value="item.id"
									 @click.native="failureReason(item.id)"
									>
									</el-option>
								</el-select>
							</el-form-item>
							<el-form-item label="审批失败原因" :label-width="formLabelWidth" v-if="trabelsInput">
								<el-input 
									placeholder="请输入审批失败的原因"
									v-model="approvalFrom.failureReason"
									maxlength="40" 
									show-word-limit
									style="width:450px"
								>
								</el-input>
							</el-form-item>
						</el-form>
						<div slot="footer" class="dialog-footer">
							<el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
							<el-button type="primary" @click="ediTravelsById('ruleForm')">确 定</el-button>
						</div>
					</el-dialog>
					<!-- 查看详情弹窗 -->
					<el-dialog
						title="查看详情"
						:visible.sync="viewCommentVisible"
						width="60%"
						:destroy-on-close="true">
						<el-form :model="travelsFormView" label-width="100px" class="demo-ruleForm">
							<el-form-item label="作者" prop="author">
								<el-input v-model="travelsFormView.author" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="游记浏览量" prop="views">
								<el-input v-model="travelsFormView.views" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="游记标题" prop="title">
								<el-input v-model="travelsFormView.title" clearable style="width:80%" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="发布时间" prop="createTime">
								<el-input v-model="travelsFormView.createTime" clearable style="width:80%" :disabled="true"></el-input>
							</el-form-item>
							<el-form-item label="封面图片" >
								<img v-if="imageUrlView" :src="imageUrlView" class="avatar">
							</el-form-item>
							<el-form-item prop="content" label="内容">
								<span v-html="`${travelsFormView.textContent}`"></span>
							</el-form-item>
						</el-form>
					</el-dialog>
					<div class="block">
						<el-row>
							<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="currentPage4"
							:page-sizes="[5, 10, 15, 20]"
							:page-size="page.pageSize"
							layout="total, sizes, prev, pager, next, jumper"
							:total="page.total">
							</el-pagination>
						</el-row>
					</div>
				</el-card>
			</el-row>
		</div>
	</div>
</template>

<script>
const axios = require('axios')
export default {
	template: 'TravelsList',
	data () {
		return {
			// 游记id
			travelsId:'',
			// 用户信息集合
			userList:{},
			// 用户id
			userId:'',
			// 用户邮箱账号
			mail:'',
			// 计算时间
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now();
				},
				shortcuts: [{
					text: '今天',
					onClick(picker) {
						picker.$emit('pick', new Date());
					}
				}, {
					text: '昨天',
					onClick(picker) {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24);
						picker.$emit('pick', date);
					}
				}, {
					text: '一周前',
					onClick(picker) {
						const date = new Date();
						date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
						picker.$emit('pick', date);
					}
				}]
			},
            // 存放时间
            time:'',
			// 审批状态信息
			typeList:{},
			// 审批信息集合
			approvalFrom:{
				id:'',
				releaseTypeId:'',
				failureReason:'',
			},
			// 查看详情集合
			travelsFormView:{
				id:'',
				author:'',
				views:'',
				title:'',
				textContent:'',
				createTime:'',
			},
			// 查看弹窗默认关闭
			viewCommentVisible: false,
			// 游记标题
			title:'',
			// 默认审批输入框隐藏
			trabelsInput: false,
			// 游记审批状态
			releaseType:'',
			// 作者名称
			author:'',
			// 存放查询的评论
			travelsFrom:[],
			// 树查询名称
			filterText: '',
			// 存放城市树信息
			data:[],
			// 分页默认页数
			currentPage4: 1,
			// 分页对象
			page: {
				pageSize: 10,
				pageNum: 1,
				total: 0
			},
			// 存放图片
			imageUrlView:'',
			// 默认审批弹窗关闭
			dialogFormVisibleEdit:false,
			formLabelWidth:'120px',
            editorOption: {},
		}
	},
	mounted () {
		// 全查游记信息
		this.getTravelsAll()
	},
	methods: {
		// 根据用户id查询用户邮箱
		mailByUserId () {
			axios.get('http://127.0.0.1:8082/user/mailByUserId?userId=' + this.userId).then((res) => {
				debugger
				this.userList = res.data.obj
				this.mail = this.userList[0].mail
			})
		},
		// 点击时将审批失败原因通过邮箱反馈给用户
		emailReply () {
			axios.get('http://127.0.0.1:8082/tourNote/emailReply', {
				params: {
					// pageSize: this.page.pageSize,
					// pageNum: this.page.pageNum,
					mail: this.mail,
					id:this.travelsId
				}
			})
			.then((res) => {
				if (res.data.code === '999') {
					this.totalTime = 0
					this.message('邮箱未绑定', 'warning')
				}
			})
		},
		// // 点击时将审批失败原因通过邮箱反馈给用户
		// emailReply () {
		// 	this.$axios.get('http://127.0.0.1:8082/tourNote/emailReply?mail=' + this.mail)
		// 	.then(res => {
		// 		if (res.data.code === '999') {
		// 			this.totalTime = 0
		// 			this.message('邮箱未绑定', 'warning')
		// 		}
		// 	})
		// },
		// 选择审批失败时显示失败原因输入框
		failureReason(id){
			debugger
			if(id === 2){
				this.trabelsInput = true
			} else{
				this.trabelsInput = false
			}
			
		},
		// 点击时刷新页面
		travelsRefresh(){
			window.location.reload();
		},
		// 查询所有审批状态
		approvalTypeAll(){
            debugger
			axios.get('http://127.0.0.1:8082/approval/getApprovalAll').then((res) => {
				this.typeList = res.data.obj
			})
		},
		// 点击审批文字时显示弹窗+回显
		travelsApproval(row){	
			this.trabelsInput = false
			this.dialogFormVisibleEdit = true
			this.approvalFrom = row
			this.travelsId = row.id
			debugger
			this.userId = row.userId
			// 根据用户id查询用户邮箱信息
			this.mailByUserId()
		},
		// 点击查看按钮时回显
		travelsDetail(row){
			this.viewCommentVisible = true
			this.travelsFormView = row
			this.imageUrlView='http://127.0.0.1:8082/getImageById?id='+row.coverId
		},
		// 删除景区信息
		deleteTravels (row) {
			this.$confirm(
			'此操作将永久删除该游记, 是否继续?',
			'提示',
			{
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			} // 删除提示框
			)
			.then(() => {
				axios
				.delete('http://127.0.0.1:8082/tourNote/deleteTravelsById?id=' + row)
				.then((res) => {
					if (res.data.obj > 0) {
					this.message('删除成功', 'success')
					this.getTravelsAll()
					} else {
					this.message('删除失败', 'warning')
					}
				})
			})
			.catch(() => {
				this.$message({
				type: 'info',
				message: '已取消删除'
				})
			})
		},
		// 修改游记发布状态
		ediTravelsById(){
			var formdata = new FormData()
			formdata.set('id', this.approvalFrom.id)
			formdata.set('releaseTypeId', this.approvalFrom.releaseTypeId)
			formdata.set('failureReason', this.approvalFrom.failureReason)
			axios.put('http://127.0.0.1:8082/tourNote/updateTourNoteType', formdata).then((res) => {
				debugger
				if(this.approvalFrom.releaseTypeId === 2){
					this.emailReply()
				}
				if (res.data.obj > 0) {
					this.message('恭喜你，完成审批！', 'success')
					this.dialogFormVisibleEdit = false
					// 重新渲染数据列表
					this.getTravelsAll() 
				} else {
					this.message('对不起，审批失败！', 'warning')
				}
			})
		},
        //设置时间为当天时间为0:0:0
        timeSet1(value){
                var date = new Date(value); //new Date(value*1000);根据时间戳格式进行选择乘1000或否
                var timeDate;
                var Y = date.getFullYear() + '-';
                var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                var D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                // var h =  0 + ':';
                // var m =  0 + ':';
                // var s =  0;
                timeDate = Y + M + D;
                return timeDate
        },
		// 根据游记名称进行模糊查询分页
		getTravelsVague () {
            if(this.time===null){
                this.time = ''
            }
            if(this.time!==''){
                this.time = this.timeSet1(this.time)
            }
			this.page.pageNum = 1
			this.currentPage4 = 1
			axios
			.get('http://127.0.0.1:8082/tourNote/getTravelsVague', {
				params: {
					pageSize: this.page.pageSize,
					pageNum: this.page.pageNum,
					title: this.title,
                    author: this.author,
                    createTime: this.time,
					releaseTypeId: this.releaseType
				}
			})
			.then((res) => {
                debugger
				this.travelsFrom = res.data.obj.content
				this.page.total = res.data.obj.total
			})
		},
		// 全查游记信息
		getTravelsAll () {
			axios.get('http://127.0.0.1:8082/tourNote/getTravelsAll', {
				params: {
					pageSize: this.page.pageSize,
					pageNum: this.page.pageNum,
				}
			})
			.then((res) => {
				this.travelsFrom = res.data.obj.content
				this.approvalTypeAll()
				this.page.total = res.data.obj.total
			})
		},
		handleSizeChange (ps) {
			this.page.pageSize = ps
			this.getTravelsAll()
			// console.log(`每页 ${val} 条`)
		},
		handleCurrentChange (pn) {
			this.page.pageNum = pn
			this.getTravelsAll()
			// console.log(`当前页: ${val}`)
		},
		// 提示消息
		message (message, type) {
			this.$message({
				message: message,
				type: type
			})
		}
	}
}
</script>

<style scoped>

</style>
